<template>
<div>
    <div style="width:100%">
      <div class="page-title" style="width:100%;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a @click="$router.go(-1)">提交问题</a></el-breadcrumb-item>
          <el-breadcrumb-item>问题详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 问题详情 -->
      <div 
      class="page-content" 
      style="font-size:20px;width:100%;border-top: 1px solid #dddddd;">
        <el-form 
        label-width="150px" 
        :model="problem">
          <el-row  style="padding-bottom:5px">
            <font style="font-size:15px;font-weight:bold">问题详情</font>
          </el-row> 
          <el-row style="padding-top:10px; border-top: 2px solid #dddddd">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="检查人：" style="height:20px">
                <el-input v-model="problem.checkStaffName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
              <el-form-item label="检查时间：" style="height:20px">
                <el-input v-model="problem.checkDate"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位：" style="height:20px">
              <el-input v-model="problem.parentCompanyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基层单位：" style="height:20px ">
              <el-input v-model="problem.basicCompanyName"></el-input>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班组：" style="height:20px">
              <el-input v-model="problem.companyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查地点：" style="height:20px">
              <el-input v-model="problem.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="检查表：">
              <el-cascader
              v-model="problem.checkListItemCode"
              :options="options"
              :props="checkListItem"
              props.expandTrigger="hover"
              @change="checkTableChange"
              clearable="true"
              style="width: 100%"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-form-item label="问题描述：" style="height:20px">
              <el-input v-model="problem.problemDescription"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="备注：" style="height:20px">
              <el-input v-model="problem.note"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="问题类型：">
            <el-input v-model="problem.problemType"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题程度：">
              <el-input v-model="problem.problemRank"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="问题体系要素：" style="height:20px">
            <el-input v-model="problem.hseFactor"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题原因：" style="height:20px">
              <el-input v-model="problem.problemSource"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全绩效扣分：" style="height:20px">
              <el-input v-model="problem.lostScore"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-form-item label="依据因素：" style="height:20px">
              <el-input v-model="problem.problemGist"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="责任人" style="height:20px">
            <el-select
                v-model="problem.responsePersonID"
                placeholder="输入姓名搜索"
                @change="responsePersonChanged"
                filterable
                clearable
                >
                <el-option
                  v-for="item in responsePersonOptions"
                  :key="item.id"
                  :label="`${item.name}`"
                  :value="item.employeeID"
                ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用工性质：" style="height:20px">
              <el-input v-model="problem.employmentProperty"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="所在岗位：" style="height:20px">
               <el-input v-model="problem.workingName"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位工龄：" style="height:20px">
              <el-input v-model="problem.workingAge"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
           <el-form-item label="整改责任人：" style="height:20px">
             <el-select
                v-model="problem.supervisorID"
                placeholder="输入姓名搜索"
                style="width:100%"
                @change="supervisorChanged()"
                filterable
                clearable
              >
                <el-option
                  v-for="item in supervisorOptions"
                  :key="item.id"
                  :label="`${item.name}`"
                  :value="item.employeeID"
                ></el-option>
              </el-select>
           </el-form-item>
        </el-row> 
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片1： ">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach1" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach1" :alt="problem.checkAttach1" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片2：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="center" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach2" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach2" :alt="problem.checkAttach2" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片3：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach3" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach3" :alt="problem.checkAttach3" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片4：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach4" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach4" :alt="problem.checkAttach4" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="检查视频：">
              <el-card 
              v-model="problem.checkVideo"
              :show-file-list="false"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :headers="{Authorization:currentUser.token}"
              style="height:251px;width:90%"
              >
              <video v-if="problem.checkVideo !='' && videoFlag1 == false"
                               :src="problem.checkVideo"
                               class="avatar video-avatar"
                               controls="controls">您的浏览器不支持视频播放</video> 
                        <i v-if="problem.checkVideo =='' && videoFlag1 == false"></i>
                    </el-card>
               </el-form-item>
          </el-col>
          </el-row>

          <!-- 整改 -->
          <div v-if="problem.immediately === '是'" style="border-top: 1px solid #dddddd;">
          <el-row style="padding-bottom:5px">
          <font style="font-size:15px;font-weight:bold">问题整改</font>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否评判教育：" style="height:20px">
              <el-input v-model="problem.education"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="整改图片1： ">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach1" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach1" :alt="problem.rectAttach1" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改图片2：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="center" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach2" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach2" :alt="problem.rectAttach2" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="整改图片3：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach3" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach3" :alt="problem.rectAttach3" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改图片4：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach4" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach4" :alt="problem.rectAttach4" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="整改视频：">
              <el-card 
              v-model="problem.rectVideo"
              :show-file-list="false"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :headers="{Authorization:currentUser.token}"
              style="height:251px;width:90%"
              >
              <video v-if="problem.rectVideo !='' && videoFlag1 == false"
                               :src="problem.rectVideo"
                               class="avatar video-avatar"
                               controls="controls">您的浏览器不支持视频播放</video> 
                        <i v-if="problem.rectVideo =='' && videoFlag1 == false"></i>
                    </el-card>
               </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col>
            <el-form-item label="整改描述：">
              <el-input v-model="problem.rectRecordDescription"></el-input>
            </el-form-item>
            </el-col>
            <el-col>
            <el-form-item label="相关文件：">
              <el-tooltip class="item" effect="dark" content="点击获取整改文件" placement="right-start">
              <a :href="problem.rectRecordFile" target="_blank">
                <i class="el-icon-document" style="font-size: 30px;"></i>
                </a>
              </el-tooltip>
            </el-form-item>
            </el-col>
          </el-row>

          <!--验证-->
          <el-row style="padding-bottom:5px">
          <font style="font-size:15px;font-weight:bold">问题验证</font>
        </el-row>
        <el-row style="padding-top:5px; border-top: 2px solid #dddddd">
          <el-col :span="12">
            <el-form-item label="验证人：">
              <el-input v-model="problem.verifyPersonName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验证时间：">
              <el-input v-model="problem.verifyDate"></el-input>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
              <el-form-item label="整改效果">
                <el-input v-model="problem.rectEffect"></el-input>
              </el-form-item>
          </el-col>
          </el-row>
          </div>
        <el-row class="buttons">
          <el-form-item>
            <el-button type="primary" @click="submitProblem()">确定</el-button>  
            <el-button type="danger" style="width:100px" @click="$router.go(-1)">取消</el-button>   
          </el-form-item>
        </el-row>
        </el-form>
      </div>
    </div>
    <!--整改人为领导选择审核人-->
   <el-dialog
    append-to-body
    title="整改人为领导，请指定审核人"
    :visible.sync="verifyPersonDialogVisible"
    width="30%">
    <el-form>
      <el-form-item
      label="审核人">
      <el-select
      v-model="problem.verifyPersonEmpID"
      placeholder="请指定审核人"
      style="width:50%" 
      filterable 
      clearable>
      <el-option 
      v-for="item in verifyPersonOptions"
      :key="item.id"
      :label="`${item.name}`"
      :value="item.employeeID">
      </el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancelSetVerifyPerson">取 消</el-button>
    <el-button type="primary" @click="setVerifyPerson">确 定</el-button>
    </span>
    </el-dialog>
</div>
</template>

<script>
import { GetCQCheckTable,
         UpdateCQNeedSubmit,
         CQGetverifyPerson
         } from '../../../services/cq_problem_acceptance'
import {GetCurrentUser } from '../../../store/CurrentUser'
import { GetEmployees } from "../../../services/cq_problem_entr";
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

export default {
  data() {
    return {
      client:VueCookies.get("client"),
      problem:{},
      checkListItem: {
         label: 'checkListItemName',
         value: 'checkListItemCode',
         children: 'childNodes',
       },
       options: [],
       checkListItemData: [],
       verifyPersonDialogVisible: false,
       responsePersonOptions:[],
       supervisorOptions:[],
       verifyPersonOptions:[],
       position: '',
      leaderList:[
        '正处级',
        '副处级',
        '科级',
        '正科级',
        '副科级',
        '副总',
      ],
    };
  },
  mounted () {
      this.getProblem()
      this.getCheckTable()
  },
  computed:{
    currentUser(){
      return GetCurrentUser()
    }
  },
  methods: {
      getProblem(){
        this.problem = this.$route.params.row
        this.handleGetEmployees()
        console.log(this.problem)
      },
      getCheckTable(){
        GetCQCheckTable(this.problem.checkListID).then((res) => {
          //console.log('res',res.data)
          this.options = res.data.items
        })
      },
      checkTableChange() {
        this.checkListItemData = this.options.map(item => {
          return item['childNodes']
        })
        //console.log('checkListItemData',this.checkListItemData)
        //console.log('checkListItemCode',this.problem.checkListItemCode[1])
        this.checkListItemData.map(item => {
          item.map(item => {
            if(this.problem.checkListItemCode[1] == item.checkListItemCode) {
              //console.log('item',item)
              this.problem.problemType = item.hazardFactorType
              this.problem.problemRank = item.problemRank
              this.problem.problemSource = item.cause
              this.problem.lostScore = item.score
              this.problem.problemGist = item.gist
              this.problem.problemDescription = item.description
              this.problem.checkListItemCode = item.checkListItemCode
            }
          })
        })
      },
      // 获取责任人与整改责任人
    handleGetEmployees() {
      GetEmployees(this.problem.companyCode)
        .then(res => {
          this.responsePersonOptions = res.data;
          this.supervisorOptions = res.data;
        })
        .catch(err => {
          this.$message.error(err.message);
          this.leaderLoading = false;
        });
    },
    supervisorChanged() {
      this.supervisorOptions.map(item => {
        if(this.problem.supervisorID == item.employeeID) {
          this.position = item.position
          this.problem.supervisorName = item.name.split("(")[0]
          console.log('supervisorName',this.problem.supervisorName)
        }
      })
    },
    //获取审核人
    getCQverifyPerson() {
      CQGetverifyPerson().then((res) => {
        this.verifyPersonOptions = res.data
        //console.log(res.data)
      })
    },
      submitProblem() {
        //console.log(this.problem)
        if(this.leaderList.indexOf(this.position) !== -1){
          if(this.problem.status == '未审核') {
            UpdateCQNeedSubmit(this.problem).then(() => {
              this.$message.success('提交成功！')
              this.$router.go(-1)
        }).catch(() => {
          this.$message.error('提交失败！');
        })
        }
        else{
          this.problem.verifyPersonEmpID = ''
          this.verifyPersonDialogVisible = true
          this.getCQverifyPerson()
          this.verifyPersonOptions.map(item =>{
        if(this.problem.verifyPersonEmpID == item.employeeID) {
          this.problem.verifyPersonName = item.name.split("(")[0]
          console.log('verifyPersonName',this.problem.verifyPersonName)
          }
          })
        }
          }
        else {
          UpdateCQNeedSubmit(this.problem).then(() => {
          this.$message.success('提交成功！')
          this.$router.go(-1)
        }).catch(() => {
          this.$message.error('提交失败！');
        })
        }
      },
      cancelSetVerifyPerson() {
      this.verifyPersonDialogVisible = false
    },
    responsePersonChanged() {
      this.problem.responsePersonName = ''
      this.responsePersonOptions.map(item =>{
        if(this.problem.responsePersonID == item.employeeID) {
          this.problem.responsePersonName = item.name.split("(")[0]
          console.log('responsePersonName',this.problem.responsePersonName)
          }
          })
    },
    setVerifyPerson() {
      this.verifyPersonOptions.map(item =>{
        if(this.problem.verifyPersonEmpID == item.employeeID) {
          this.problem.verifyPersonName = item.name.split("(")[0]
          //console.log('verifyPersonName',this.problem.verifyPersonName)
          }
          })
      this.problem.status = '未审核'
      this.verifyPersonDialogVisible = false
    },
  }
};
</script>

<style>
#main{
  width:1000px;
  height: 100%;
  margin-left: 2%;
  margin-right: 5%;
}
.above{
margin-top: 20px;
width: 1000px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 30px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: buttom;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 400px;
  height: 200px;
}
.el-cascader-menu{
  width: 400px;
}
</style>
